<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { icons } from './icons';
import { getLocalIcons } from '@/utils/icon';
import { fetchGetMenuList } from '@/service/api';

defineOptions({ name: 'IconPage' });

// 类型定义
interface IconItem {
  id: number;
  name: string;
  usedBy: MenuUseInfo[];
}

interface MenuUseInfo {
  id: number;
  name: string;
}

// 本地图标
const localIcons = ref<IconItem[]>([]);
// 菜单数据
const menuData = ref<any[]>([]);
// 表格加载状态
const loading = ref(false);
// 上传对话框可见性
const uploadDialogVisible = ref(false);
// 上传文件
const uploadFile = ref<File | null>(null);
// 文件名
const fileName = ref('');

// 初始化
onMounted(async () => {
  await loadLocalIcons();
  await loadMenuData();
});

// 加载本地图标
async function loadLocalIcons() {
  loading.value = true;
  try {
    const icons = getLocalIcons();
    localIcons.value = icons.map((name, index) => ({
      id: index + 1,
      name,
      usedBy: []
    }));
  } catch (error) {
    console.error('加载图标失败:', error);
    ElMessage.error('加载图标失败');
  } finally {
    loading.value = false;
  }
}

// 加载菜单数据
async function loadMenuData() {
  try {
    // 获取菜单信息
    const res = await fetchGetMenuList();
    if (res.data && res.data.records) {
      menuData.value = res.data.records;
      
      // 更新图标使用情况
      updateIconUsage();
    }
  } catch (error) {
    console.error('加载菜单数据失败:', error);
  }
}

// 更新图标使用情况
function updateIconUsage() {
  // 重置使用情况
  localIcons.value.forEach(icon => {
    icon.usedBy = [];
  });
  
  console.log('更新图标使用情况，菜单数:', menuData.value.length);
  
  // 检查每个菜单项
  menuData.value.forEach(menu => {
    try {
      // 检查图标类型 (iconType=2表示本地图标)
      if (menu.iconType === '2' && menu.icon) {
        console.log('发现使用本地图标的菜单:', menu.menuName, '图标:', menu.icon);
        // 在本地图标中查找
        const iconItem = localIcons.value.find(item => item.name === menu.icon);
        if (iconItem) {
          // 记录使用了该图标的菜单
          iconItem.usedBy.push({
            id: menu.id,
            name: menu.menuName
          });
        }
      }
      
      // 检查localIcon字段
      if (menu.localIcon) {
        console.log('发现使用localIcon字段的菜单:', menu.menuName, '图标:', menu.localIcon);
        const iconItem = localIcons.value.find(item => item.name === menu.localIcon);
        if (iconItem) {
          // 检查是否已经添加过，避免重复
          if (!iconItem.usedBy.some(item => item.id === menu.id)) {
            iconItem.usedBy.push({
              id: menu.id,
              name: menu.menuName
            });
          }
        }
      }
    } catch (error) {
      console.error('处理菜单使用情况出错:', error);
    }
  });
  
  console.log('图标使用情况更新完成:', localIcons.value);
}

// 删除图标
function handleDelete(row: IconItem) {
  // 检查图标是否正在使用
  if (row.usedBy.length > 0) {
    ElMessage.warning('该图标正在被菜单使用，无法删除');
    return;
  }
  
  ElMessageBox.confirm('确定要删除该图标吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 在实际应用中，这里应该有一个删除后端图标文件的API
    ElMessage.success('图标删除成功（模拟）');
    
    // 从列表中移除
    const index = localIcons.value.findIndex(item => item.id === row.id);
    if (index !== -1) {
      localIcons.value.splice(index, 1);
    }
  }).catch(() => {});
}

// 处理图标上传
function handleUpload() {
  if (!uploadFile.value || !fileName.value) {
    ElMessage.warning('请选择文件并输入图标名称');
    return;
  }
  
  // 检查图标名称是否已存在
  if (localIcons.value.some(icon => icon.name === fileName.value)) {
    ElMessage.warning('图标名称已存在');
    return;
  }
  
  // 在实际应用中，这里应该有一个上传文件到后端的API
  ElMessage.success('图标上传成功（模拟）');
  
  // 添加到列表
  const newId = localIcons.value.length > 0 
    ? Math.max(...localIcons.value.map(icon => icon.id)) + 1 
    : 1;
    
  localIcons.value.push({
    id: newId,
    name: fileName.value,
    usedBy: []
  });
  
  // 关闭对话框和重置表单
  uploadDialogVisible.value = false;
  uploadFile.value = null;
  fileName.value = '';
}

// 文件选择改变
function handleFileChange(e: Event) {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;
  
  // 检查文件类型
  if (file.type !== 'image/svg+xml') {
    ElMessage.error('请上传SVG格式的图标');
    target.value = ''; // 清空选择
    return;
  }
  
  uploadFile.value = file;
  
  // 自动设置文件名（不包含扩展名）
  if (!fileName.value) {
    fileName.value = file.name.replace('.svg', '');
  }
}
</script>

<template>
  <div class="h-full">
    <el-card class="mt-10px card-wrapper">
      <template #header>
        <div class="flex justify-between items-center">
          <span>本地图标管理</span>
          <el-button type="primary" @click="uploadDialogVisible = true">添加图标</el-button>
        </div>
      </template>
      
      <el-table :data="localIcons" border v-loading="loading" row-key="id">
        <el-table-column label="ID" prop="id" width="80" sortable />
        <el-table-column label="图标名称" prop="name" min-width="120" />
        <el-table-column label="图标预览" width="120">
          <template #default="{ row }">
            <div class="flex justify-center">
              <svg-icon :local-icon="row.name" class="text-30px text-primary" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="使用情况" min-width="200">
          <template #default="{ row }">
            <div v-if="row.usedBy.length === 0" class="text-gray-400">
              <em>未被使用</em>
            </div>
            <div v-else>
              <el-tag v-for="menu in row.usedBy" :key="menu.id" class="mr-5px mb-5px">
                {{ menu.name }} (ID: {{ menu.id }})
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="{ row }">
            <el-button 
              type="danger" 
              size="small" 
              :disabled="row.usedBy.length > 0"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 上传图标对话框 -->
    <el-dialog v-model="uploadDialogVisible" title="添加图标" width="500px">
      <el-form label-position="top">
        <el-form-item label="选择SVG图标文件">
          <input 
            type="file" 
            accept=".svg" 
            @change="handleFileChange"
            class="w-full"
          />
        </el-form-item>
        <el-form-item label="图标名称">
          <el-input v-model="fileName" placeholder="请输入图标名称（不含扩展名）" />
        </el-form-item>
        <div class="text-gray-400 text-sm mt-2 mb-4">
          注：上传的SVG文件将保存在 src/assets/local-icon 目录下
        </div>
      </el-form>
      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpload">上传</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 修改文件上传按钮样式 */
input[type="file"] {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
}
input[type="file"]:hover {
  border-color: #409eff;
}
</style>
